<template>
	<Container>
		<view class="header">
			<view v-if="isStart" class="countdown" :class="{ countDownAnimation: countDownAnimation }">{{ assignment.answerTexts[count] }}</view>
			<Numbers v-if="numberShow" :stopTap="questionPress" :answerTexts="assignment.answerTexts" @numberEnd="numberEnd" />
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Numbers from '../number.vue'
export default {
	mixins: [mixins],
	components: { AudioIcon, Question, Container, Numbers },
	data() {
		return {
			isStart: false,
			numberShow: false,
			count: 0,
			interval: null,
			countDownAnimation: true
		}
	},
	methods: {
		questionPlay: async function() {
			const data = await this.parseTextAudio({
				text: this.assignment.questionName,
				speaker: this.assignment.audioSpeaker ? this.assignment.audioSpeaker : null
			})
			this.dialogueAudio({
				src: data,
				start: () => {
					clearInterval(this.interval)
					this.count = 0
					this.questionPress = true
					this.isStart = false
					this.numberShow = false
				},
				end: () => {
					this.questionPress = false
					this.isStart = true
					this.interval = setInterval(() => {
						if (this.count < this.assignment.answerTexts.length - 1) {
							this.countDownAnimation = false
							const timer = setTimeout(() => {
								this.countDownAnimation = true
								this.count++
							}, 0)
							this.$once('hook:beforeDestory', function() {
								clearTimeout(timer)
							})
						} else {
							this.isStart = false
							this.numberShow = true
							this.count = 0
							clearInterval(this.interval)
						}
					}, 1200)
				}
			})
		},
		numberEnd: function(bool) {
			this.$parent.next({
				isSure: bool
			})
		},
		questionPause: function() {
			this.dialogueAudio({
				play: false
			})
			this.questionPress = false
			this.isStart = false
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	justify-content center
	align-items center
	position relative
	.countdown
		color #FF775B
		font-family monospace
		font-weight 500
		font-size 30vh
.countDownAnimation
	animation countDownAnimation 0.3s
@keyframes countDownAnimation
	0%
		transform scale(1.2)
		opacity 0.3
	100%
		transform scale(1)
		opacity 1
</style>
